<!--
 * @Author: SeonHu
 * @Date: 2025-09-28 14:19:35
 * @LastEditors: SeonHu
 * @LastEditTime: 2025-09-29 17:28:09
 * @FilePath: \bg-vben\src\views\dashboard\account\setting\index.vue
 * @Description: 
 * Copyright © 2020-2025 SANQING Corporation, All rights reserved.
-->
<template>
  <ScrollContainer>
    <div :class="prefixCls">
      <Tabs tab-position="left" :tab-bar-style="tabBarStyle">
        <template v-for="item in settingList" :key="item.key">
          <TabPane :tab="item.name">
            <component :is="item.component" />
          </TabPane>
        </template>
      </Tabs>
    </div>
  </ScrollContainer>
</template>

<script lang="ts" setup>
  import { ScrollContainer } from '@/components/Container/index';
  import { Tabs } from 'ant-design-vue';

  import { settingList } from './data';

  defineOptions({ name: 'AccountSettingPage' });

  const TabPane = Tabs.TabPane;

  const prefixCls = 'account-setting';
  const tabBarStyle = {
    width: '220px',
  };
</script>

<style lang="scss">
  .account-setting {
    margin: 12px;
    background-color: $component-background;

    .base-title {
      padding-left: 0;
    }

    .ant-tabs-tab-active {
      background-color: $item-active-bg; //#e6f4ff -备查
    }
  }
</style>
